<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-red-sunglo bold uppercase">用户添加</span>
            <span class="caption-helper">同名用户可以重复，但是建议只分配一个</span>
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal" id="save-module">
            <div class="form-body">
                <div class="form-group hide">
                    <label class="col-md-3 control-label">ID</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa  fa-qq"></i>
                            <%--<input type="text" name="id" value="22">--%>

                        </div>
                    </div>
                </div>
                <div class="form-group frist">
                    <label class="col-md-3 control-label">用户名称</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa  fa-qq"></i>
                            <input type="text" name="username" class="form-control" placeholder="用户名称"/>
                        </div>
                    </div>
                </div>
                <div class="form-group last">
                    <label class="col-md-3 control-label">用户年龄</label>
                    <div class="col-md-4">
                        <input type="text" name="age" class="form-control" placeholder="用户年龄"/>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-md-3 control-label">头像</label>
                    <div class="col-md-4">
                        <label style="color:gray;font-size: 12px;">
                            支持的格式有：jpg;文件最大为3MB;
                        </label>
                        <div>
                            <input type="hidden" id="fileurl" name="fileurl">
                            <label>
                                <input type="file" id="fileupload" name="file" class="hide"
                                       style="max-width: 300px;display: inline;">
                                <a href="javascript:void(0)" class="btn btn-primary btn-xsmall"
                                   onclick="startUp();">选择文件</a>
                            </label>
                            <p id="123"></p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="button" class="btn green" onclick="save()">保存</button>
                                <button type="button" class="btn default" onclick="layer.close(layer_addModule);">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"> </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>
<script>

    $(function(){
        //初始化页面
        initPage();
        //初始化文件控件
        initFileupload()
    });

    function save(){
        var param = tools.formParams("save-module");
        console.log(param);
        if(tools.valid("save-module")){
            tools.post("/user/save",param,function(data){
                if(data.success){
                    layer.msg('保存成功', {icon: 1,time:1000},function(){
                        //刷新列表页面
                        toPage(null);
                        //关闭弹窗
                        layer.close(layer_addModule);
                    });
                }else{
                    tools.errorTip(data.code,data.data);
                }
            });
        }

    }
    function startUp() {
        fileupload.click();
    }
    /**
     * 初始化文件控件
     */
    function initFileupload() {
        //console.log("开始上传");
        $('#fileupload').fileupload({
            url: '/file/uploadTempImage',
            formData: {},//如果需要额外添加参数可以在这里添加
            dataType: 'json',
            addClass: "img-thumbnail",
            done: function (e, result) {
                layer.msg('上传成功');
                //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                //返回的数据在result.result中
                var data = result.result;
                var image="/sysImage/showTempImg?src=" + data.data;
                var frameImg = document.createElement("img");//创建一个标签SS
                frameImg.setAttribute('src',image)//给img标签的src属性赋值
                frameImg.setAttribute('width','100')
                var bodyFa = document.getElementById("123");//通过id号获取frameDiv 的父类（也就是上一级的节点）
                if(image!=null){
                    bodyFa .appendChild(frameImg);//把创建的节点frameDiv 添加到父类body 中；
                }
                if (data.success) {
                    if($("#fileurl").val()==""){
                        $("#fileurl").val(data.data);
                    }else {
                        $("#fileurl").val($("#fileurl").val()+","+data.data);

                    }

                } else {
                    var _case = {
                        1: "请选择图片！",
                        2: "仅支持\".jpg\"格式的图片！",
                        3: "文件大小超过限制！"
                    };
                    tools.errorTip( data.code,data.data);
                }

            }

        });
    }



</script>
